<template>
  <div>
    <form action="/">
      <van-search
        v-model="inpval"
        show-action
        :placeholder="placeholder"
        @search="onSearch(inpval)"
        @cancel="onCancel"
        @update:model-value="inputChange"
      />
    </form>
    <div v-show="show" class="b">
      <div class="searchItem" v-for="(item, index) in timedata" :key="index">
        <div class="Itemcontent" @click="navigateToSearch(item)">
          <span class="text1">{{ item }}</span>
          <span class="text">></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineEmits } from "vue";
import { useRouter, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useSearchStore } from "../../../store/searchHead";
import debounce from "lodash.debounce";
import { getdata, getrealtime } from "../../../api/search";
const searchStore = useSearchStore();
const emit = defineEmits();
const router = useRouter();
const route = useRoute();
const timedata = ref([]);
//时间戳
const timestamp = ref(Date.now());
const { historyArray, placeholder, goodesdata,show,inpval,showindexbottom } =
  storeToRefs<any>(searchStore);
//页面挂载时执行的函数
onMounted(() => {
  //input根据搜索历史设置value
  inpval.value = route.query.keyword;
  // console.log(show);
});
//input的change事件
const inputChange = async () => {
  //定义获取实时关键字的函数
  const getRealtime = async () => {
    const res = await getrealtime(inpval.value);
    // console.log(res);
    if(res.data.length>0){
      show.value = true;
      showindexbottom.value = false;
      timedata.value = res.data;
    }
  };
  //判断如果为空,就不发送请求,防抖操作,获取实时关键字
  let isEmpty = /^\s*$/.test(inpval.value);
  if (
    !isEmpty &&
    inpval.value !== "" &&
    inpval.value !== undefined &&
    inpval.value !== null
  ) {
    const debouncedGetRealtime = debounce(getRealtime, 100);
    timedata.value = [];
    // 调用防抖函数返回的函数
    debouncedGetRealtime();
  } else {
    show.value = false;
    showindexbottom.value= true;
  }
};
// 发送请求获取商品(发送请求时(关键字的)参数不同,所以定为变量)
const getGoodes = async (value:string) => {
      const res = await getdata(timestamp.value, value, -1, -1, 0);
      goodesdata.value = res.data.directlyList;
    };
//input的search事件
const onSearch = (value: any) => {
  inpval.value = value;
  let isEmpty = /^\s*$/.test(value);
  //如果搜索框不为空存入历史记录，(因为发送请求时,搜索框内容为空,所以这里要判断一下)
  if (
    !isEmpty &&
    value !== "" &&
    value !== undefined &&
    value !== null &&
    !historyArray.value.includes(inpval.value)
  ) {
    router.push("/searchzyt?keyword=" + value+ "&_stat_search=userhand");
    if (historyArray.value.length >= 10){
      historyArray.value.pop();
    }
    historyArray.value.unshift(inpval.value);
    showindexbottom.value = true;
    localStorage.setItem("keyword", JSON.stringify(historyArray.value));
    show.value = false;
    showindexbottom.value=true
    getGoodes(value);

  } else if (!isEmpty && value !== undefined && value !== null) {
    if (historyArray.value.length >= 10){
      historyArray.value.pop();
    }
    historyArray.value.splice(historyArray.value.indexOf(inpval.value), 1);
    historyArray.value.unshift(inpval.value);
    localStorage.setItem("keyword", JSON.stringify(historyArray.value));
  }
};
//点击实时关键字发送请求
const navigateToSearch =async (keyword: string) => {
  await onSearch(keyword);
};
// 点击取消
const onCancel = () => {
  show.value = false;
  showindexbottom.value=true;
  router.back();
};
</script>

<script lang="ts">
export default {
  name: "",
  defineprops: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  definemits: ["update:show"],
};
</script>
<style lang="scss" scoped>
.b{
  background-color: #fff;
  .searchItem {
    margin-left: 10px;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid #dad1d1;
    line-height: 52px;
    font-size: 16px;
    &:last-child {
      border-bottom: 1px solid #fff;
    }
    .Itemcontent {
      margin-right: 20px;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      .text1 {
        font-size: 14px;
      }
      .text {
        color: #a1a0a0;
      }
    }
  }
}
</style>
